<template>
  <!-- 新闻管理 新闻审核 -->
  <div v-loading="loading" element-loading-text="拼命加载中">
    <el-row>
      <!-- 按钮区 -->
      <el-col :span="24">
        <div class="button-wrapper">
          <el-button type="primary" style="vertical-align:middle;margin-top:10px;margin-left: 5px" round size="mini" @click="isBatchPass(0)">通过</el-button>
          <el-button type="danger" style="vertical-align:middle;margin-top:10px;" round size="mini" @click="isBatchPass(8)">不通过</el-button>
        </div>
      </el-col>
    </el-row>
    <!-- 表格 -->
    <el-row>
      <el-col :span="24">
        <div class="data-wrapper">
          <template v-if="tableData3!=null">
            <el-table ref="multipleTable" :data="tableData3"  tooltip-effect="dark" style="width: 100%"
                      @selection-change="handleSelectionChange">
              <el-table-column type="selection" label="全选" width="55">
              </el-table-column>
              <el-table-column type="index" label="序号" width="50" :index="indexMethod">
              </el-table-column>
              <el-table-column prop="newsNum" label="新闻编号">
              </el-table-column>
              <el-table-column prop="newsTitle" label="新闻标题" width="200">
              </el-table-column>
              <el-table-column prop="releaseTime" label="发布时间" width="200" :formatter="releaseTimeFormatter">
              </el-table-column>
              <el-table-column prop="releaseUser" label="发布人" width="200" :formatter="releaseUserFormatter">
              </el-table-column>
              <el-table-column prop="status" label="新闻详情" align="center">
                <template slot-scope="scope">
                  <span style="display: block;color: blue; cursor:pointer;" @click="handleEdit(scope.$index, scope.row)">查看</span>
                </template>
              </el-table-column>
              <el-table-column fixed="right" label="操作" align="center" width="220">
                <template slot-scope="scope">
                  <el-button size="mini" round type="primary" @click="isPass(0, scope.row)">通过</el-button>
                  <el-button size="mini" round type="danger" @click="isPass(8, scope.row)">不通过</el-button>
                </template>
              </el-table-column>
            </el-table>
          </template>
        </div>
      </el-col>
    </el-row>
    <!-- 底部按钮和分页 -->
    <el-row :gutter="20" v-if="dataCount" type="flex" justify="space-between" align="center" class="page-wrapper">
      <el-col :span="24">
        <div class="page-item">
          <el-pagination background
                         @size-change="handleSizeChange"
                         @current-change="handleCurrentChange"
                         :current-page.sync="listQuery.currentPage"
                         :page-sizes="pageSizes"
                         :page-size="listQuery.pageSize"
                         layout="total, sizes, prev, pager, next, jumper"
                         :total="dataCount"/>
        </div>
      </el-col>
    </el-row>

    <!-- 意见弹窗 -->
    <el-dialog title="请输入意见" :visible.sync="dialogFormVisible">
      <el-form :model="form" :rules="rules" ref="form">
        <el-row :gutter="5">
          <el-col :span="24">
            <el-form-item label="意见" :label-width="formLabelWidth" prop="remark">
              <el-input type="textarea" v-model="form.remark" auto-complete="off"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="medium" @click="dialogFormVisible = false">取 消</el-button>
        <el-button size="medium" type="success" @click="submitForm('form')">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 批量意见弹窗 -->
    <el-dialog title="请输入批量操作意见" :visible.sync="dialogFormVisible2">
      <el-form :model="form" :rules="rules" ref="form">
        <el-row :gutter="5">
          <el-col :span="24">
            <el-form-item label="意见" :label-width="formLabelWidth" prop="remark">
              <el-input type="textarea" v-model="form.remark" auto-complete="off"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="medium" @click="dialogFormVisible2 = false">取 消</el-button>
        <el-button size="medium" type="success" @click="batchEdit('form')">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 查看 -->
    <el-dialog title="新闻信息编辑" :visible.sync="dialogFormVisible1">
      <el-form :model="oneCol" v-if="oneCol" >
        <el-row :gutter="5">
          <el-col :span="12">
            <el-form-item label="新闻类型" :label-width="formLabelWidth">
              <el-select v-model="oneCol.newsType" clearable placeholder="请选择新闻类型" class="filter-item"
                         :disabled="true">
                <el-option v-for="item in newsTypeOptions" :key="item.dictId" :label="item.dictName" :value="item.dictValue"/>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="新闻编号" :label-width="formLabelWidth">
              <el-input v-model="oneCol.newsNum" auto-complete="off" :disabled="true"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="5">
          <el-col :span="12">
            <el-form-item label="新闻标题" :label-width="formLabelWidth">
              <el-input v-model="oneCol.newsTitle" auto-complete="off" :disabled="true"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="新闻链接地址" :label-width="formLabelWidth">
              <el-input v-model="oneCol.newsUrl" auto-complete="off" :disabled="true"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="5">
          <el-col :span="24">
            <el-form-item label="新闻内容" :label-width="formLabelWidth">
              <el-input type="textarea" v-model="oneCol.newsContents" auto-complete="off" :disabled="true"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="medium" type="primary" @click="dialogFormVisible1 = false">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
    export default {
        data(){
            return {
                //新闻类型下拉值
                newsTypeOptions:[],
                tableData3:null,
                loading:false,
                multipleSelection: [],
                //默认数据总数
                dataCount:0,
                pageSizes:[5, 10, 20, 30, 40],
                //查询条件
                listQuery: {
                    currentPage:1,
                    pageSize:5
                },
                formLabelWidth: '120px',
                dialogFormVisible:false,
                dialogFormVisible1:false,
                dialogFormVisible2:false,
                //声明的一个单行表格数据
                oneCol:{},
                form: {},
                rules:{
                    remark:[
                        {required : true, message: '请输入审批意见', trigger: 'blur'}
                    ]
                }
            }
        },
        created() {
            this.getList();
            this.getNewsTypeOptions();
        },
        methods:{
            getList() {
                this.listQuery;
                this.loading=true;
                this.postRequest('/api/rcs/riverNewsAudit',this.listQuery).then((res)=>{
                    var data = res.data;
                    if(data.status == 200){
                        this.tableData3=data.data
                        this.dataCount=data.count;
                        this.loading = false;
                    }else{
                        this.$message.error(data.msg);
                    }
                })
                    .catch((error)=>{
                        //错误信息
                        this.$message.error(error)
                    })
            },
            //获取新闻类型字典值
            getNewsTypeOptions(){
                this.getDictionary({types:["NEWS_TYPE"]}).then(res => {
                    var data = res.data;
                    if(data.status == 200){
                        this.newsTypeOptions = data.data["NEWS_TYPE"];
                    }else{
                        this.$message.error(data.msg);
                    }
                })
                    .catch((error)=>{
                        this.$message.error(error)
                    })
            },
            //为空判断
            releaseTimeFormatter(row, column){
                return row.releaseTime ? row.releaseTime:"-";
            },
            releaseUserFormatter(row, column){
                return row.releaseUser ? row.releaseUser:"-";
            },
            handleSelectionChange(val) {
                this.multipleSelection = val;
            },
            indexMethod(index) {
                return (index+1)+(this.listQuery.currentPage-1)*this.listQuery.pageSize;
            },
            handleSizeChange(size) {
                this.listQuery.pageSize=size;
                this.listQuery.currentPage=1;
                this.getList()
            },
            handleCurrentChange(currentPage) {
                this.listQuery.currentPage=currentPage;
                this.getList()
            },
            //查看操作
            handleEdit(index, row){
                let rowData = Object.assign({},row);
                this.oneCol=rowData;
                this.oneCol.newsType = rowData.newsType.code;
                this.dialogFormVisible1=true;
            },
            //批量操作
            isBatchPass(status){
                if(this.multipleSelection.length <= 0){
                    this.$message.warning('请至少选择一条数据！');
                    return;
                }
                this.dialogFormVisible2 = true;
                this.form.status = status;
            },
            batchEdit(formName) {
                var ids = [];
                for (var i = 0; i < this.multipleSelection.length; i++) {
                    ids.push(this.multipleSelection[i].id);
                }
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        this.postRequest('/api/rcs/riverNewsBatchAudit',
                            {"ids":ids,"status":this.form.status,"remark":this.form.remark}).then((res)=>{
                            var data = res.data;
                            if(data.status == 200){
                                this.dialogFormVisible2 = false;
                                this.$message.success("批量审批成功！");
                                this.form = {};
                                this.getList();
                            }else{
                                this.$message.error(data.msg);
                            }
                        })
                        .catch((error)=>{
                            this.$message.error(error)
                        })
                    }
                    else {
                        this.$message.error('error submit!!');
                        return false;
                    }
                });
            },
            isPass(status,row){
                this.dialogFormVisible = true;
                this.form.status = status;
                this.form.id = row.id;
            },
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        this.postRequest("/api/rcs/oneRiverNewsAudit",this.form).then((res)=>{
                            if(res.data.status == 200){
                                this.dialogFormVisible = false;
                                this.$message.success('审批成功！');
                                this.form = {};
                                this.getList();
                            }else{
                                this.$message.error("审批失败！");
                            }
                        })
                        .catch((error)=>{
                            this.$message.error(error);
                        })
                    } else {
                        this.$message.error('error submit!!');
                        return false;
                    }
                });
            }
        },
        mounted(){},
        updated(){},
        destroyed(){},
    }
</script>
<style scoped>

</style>